<script setup lang="ts">
import { useMemberStore, useOrderStore, usePagesMachineIdStore } from '@/stores'
import clearData from '@/utils/component'
import { MyShowModal, PageSkip } from '@/utils/tools'
import { ref } from 'vue'

const memberStore = useMemberStore()

// 动态显示导航栏
const query = defineProps<{
  title: string
}>()
console.log(query.title)
uni.setNavigationBarTitle({ title: query.title })
// ！！！！！！！！！！！！！！！！！！！！！！！ 服务中心 渲染的数据 ！！！！！！！！！！！！！！！！！！！！！！！
const userServiceList = [
  // 渲染的数据
  // {
  //   title: '留言反馈',
  //   url: '/pagesMy/userFeedbackAndProblem/userFeedbackAndProblem',
  //   icon: 'icon-right',
  // },
  {
    title: '常见问题',
    url: '/pagesMy/userFeedbackAndProblem/userFeedbackAndProblem',
    icon: 'icon-right',
  },
]

const phoneNumber = ref(['19128769631'])
/**
 * * 调用电话客服
 */
const phoneCSFn = () => {
  console.log(111)
  uni.showActionSheet({
    itemList: phoneNumber.value,
    success: (success: UniApp.ShowActionSheetRes) => {
      uni.makePhoneCall({
        phoneNumber: phoneNumber.value[success.tapIndex],
        success: (res) => {
          console.log(res)
        },
      })
    },
  })
}

// ！！！！！！！！！！！！！！！！！！！！！！！ 更多设置 渲染的数据 ！！！！！！！！！！！！！！！！！！！！！！！
const miniParm = wx.getAccountInfoSync()
const userSettingsList = [
  { title: '版本号', text: `v${miniParm.miniProgram.version || '1.0.0'}` },
  // { title: '关于我们', url: '/pagesMy/userServiceAndSettings/aboutUs', icon: 'icon-right' },
]
// 点击订阅
const onSubscribe = () => {
  uni.requestSubscribeMessage({
    tmplIds: [],
    success: () => {
      console.log(11111111)
    },
  })
}
import useQuery from '@/hooks/useQuery'
/**
 * @param logOut 登出 并且清空用户数据
 */
const logOut = () => {
  MyShowModal('您确定要退出登录吗？').then((success: UniApp.ShowModalRes) => {
    if (success.confirm) {
      const orderStore = useOrderStore()
      orderStore.setOrderStatus('') // 页面初始化 清空订单状态 防止本地缓存的订单状态异常
      clearData('user')
      usePagesMachineIdStore().clearPagesMachineId()
      useQuery().deleteQueryParams()
      // 跳转到 Tab 界面
      PageSkip('/pages/index/index', 'reLaunch')
    }
  })
}
</script>

<template>
  <!-- 服务中心  -->
  <view v-if="query.title === '服务中心'" class="userService">
    <view class="userService_Item" @tap="phoneCSFn"
      >电话客服 <text class="phoneNumber">{{ phoneNumber[0] }}</text>
      <text class="iconfont icon_dianhua"> </text>
    </view>
    <navigator
      v-for="item in userServiceList"
      :key="item.title"
      :url="`${item.url}?title=${item.title}`"
      class="userService_Item"
      hover-class="none"
    >
      <text>{{ item.title }}</text>
      <text class="iconfont" :class="item.icon"></text>
    </navigator>
  </view>

  <!-- 更多设置  -->
  <view v-if="query.title === '更多设置'" class="userSettings">
    <view class="subscribe" v-if="false" @tap="onSubscribe">
      <text>订阅特权活动通知</text> <text class="icon-right"></text>
    </view>
    <navigator
      v-for="item in userSettingsList"
      class="userSettings_Item"
      :url="`${item.url}?title=${item.title}`"
      :key="item.title"
      hover-class="none"
    >
      <text>{{ item.title }}</text>
      <text :class="item.icon">{{ item.text }}</text>
    </navigator>
    <button v-if="memberStore.token" @tap="logOut" hover-class="view-hover" class="logOut">
      退出登录
    </button>
  </view>
</template>

<style lang="scss">
page {
  background-color: $uni-bg-color-grey;
}
.userService_Item,
.userSettings_Item,
.subscribe {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 0 40rpx 0 36rpx;
  width: 702rpx;
  height: 96rpx;
  font-size: 28rpx;
  border-radius: 16rpx;
  color: #000000e5;
  background-color: $uni-bg-color;
  .phoneNumber {
    position: absolute;
    right: 104rpx;
  }
}
.logOut {
  margin: 60rpx 24rpx 0 24rpx;
  width: 702rpx;
  height: 96rpx;
  line-height: 96rpx;
  align-items: center;
  font-size: 28rpx;
  border-radius: 44rpx;
  color: #fff;
  background-color: $uni-color-motif;
}
// 弹出层
.onPhoneNumber {
  border-radius: 32rpx 32rpx 0 0;
}
.popupClose,
.onPhoneNumber {
  width: 100%;
  line-height: 96rpx;
  font-size: 32rpx;
  text-align: center;
  background-color: #fff;
}
.popupClose {
  padding-bottom: 30rpx;
}
.interlayer {
  width: 100%;
  height: 20rpx;
  background-color: #f5f5f5;
}

.icon_dianhua {
  font-size: 54rpx;
  color: #ffaa2c;
}
</style>
